@charset "utf-8";

/* CSS Document */

body {
	width: 100%;
	height: 100%;
	background-color: rgb(224, 224, 224);
}


/*菜单1区的css样式*/

#menu1 {
	position: absolute;
	width: 200px;
	height: 35px;
	background-color: #F5F5F5;
	left: 800px;
	top: 50px;
	border: #bbb solid 1px;
	box-shadow: 0 0 5px #fff;
}

#menu1 ul {
	list-style-type: none;
	margin-top: 10px;
}

#menu1 li {
	float: left;
	text-align: center;
	width: 57px;
}

#menu1 ul li#menuDiv {
	width: 1px;
	height: 18px;
	background: #999
}

#menu1 a:link,
#menu1 a:visited {
	color: #000;
	text-decoration: none;
}

#menu1 a:hover {
	color: #F30;
	text-decoration: none;
}


/*菜单2区的css样式*/

#menu2 {
	position: absolute;
	width: 290px;
	height: 35px;
	background-color: #F5F5F5;
	left: 700px;
	top: 220px;
	text-align: center;
	border: #bbb solid 1px;
}

#menu2 ul {
	list-style-type: none;
	margin-top: 10px;
	margin-left: -20px;
}

#menu2 li {
	float: left;
	width: 80px;
}

#menu2 ul li#menuDiv {
	width: 1px;
	height: 18px;
	background: #999;
}

#menu2 a:link,
#menu2 a:visited {
	color: #000;
	text-decoration: none;
}

#menu2 a:hover {
	color: #F30;
	text-decoration: none;
}


/*博主个人图片区css样式*/

#masterinfo {
	position: absolute;
	width: 270px;
	height: 250px;
	top: 63px;
	left: 91px;
}


/*设置图片按400px进行缩放显示*/

#masterinfo img {
	max-width: 270px;
	width: expression_r(this.width<270px?"auto":"270px");
}


/*博主签名区css样式*/

#bloginfo {
	position: absolute;
	width: 270px;
	height: 94px;
	top: 55px;
	left: 379px;
}

#sign {
	font-family: '楷体';
	font-weight: 300;
	font-size: 24px;
	color: #06F;
}

#bloger {
	font-family: '微软雅黑';
	font-weight: 100;
	font-size: 22px;
	color: #666;
}


/*博客空间统计区css样式*/

#statistic {
	position: absolute;
	width: 220px;
	height: 110px;
	background-color: #FFF;
	left: 110px;
	top: 335px;
	border: #CCC solid 1px;
	text-align: center;
}

#statistictopic {
	width: 99.8%;
	height: 20px;
	padding-top: 5px;
	padding-bottom: 5px;
	line-height: 20px;
	border-bottom: #CCC solid 1px;
	background-color: #F5F5F5;
	text-align: left;
}

#statistictopic span {
	color: #666;
	font-family: "微软雅黑";
	font-size: 12px;
	font-weight: bold;
	margin-left: 20px;
}

#statistic table {
	width: 80%;
	margin: 5px auto 5px auto;
	color: #666;
	font-size: 12px;
	font-weight: bold;
	font-family: "微软雅黑";
}

#statistic table tr {
	line-height: 18px;
}


/*热点文章目录区*/

#recommend {
	position: absolute;
	width: 220px;
	height: 330px;
	background-color: #FFF;
	left: 110px;
	top: 465px;
	border: #CCC solid 1px;
}

#recommendtopic {
	width: 99.8%;
	height: 20px;
	padding-top: 5px;
	padding-bottom: 5px;
	line-height: 20px;
	border-bottom: #CCC solid 1px;
	background-color: #F5F5F5;
	text-align: left;
}

#recommendtopic span {
	color: #666;
	font-family: "微软雅黑";
	font-size: 12px;
	font-weight: bold;
	margin-left: 20px;
}

#recommend ul {
	margin: 5px auto 5px auto;
	font-size: 12px;
	font-family: "微软雅黑";
	list-style-type: none;
}

#recommend li {
	text-align: left;
	padding: 5px 0px 5px 5px;
	margin-left: -25px;
	color: #606;
}


/*文章搜索区css样式*/

#search {
	position: absolute;
	width: 220px;
	height: 87px;
	background-color: #FFF;
	left: 110px;
	top: 815px;
	border: #CCC solid 1px;
	line-height: 57px;
}

#searchtopic {
	width: 99.8%;
	height: 20px;
	padding-top: 5px;
	padding-bottom: 5px;
	line-height: 20px;
	border-bottom: #CCC solid 1px;
	background-color: #F5F5F5;
	text-align: left;
}

#searchtopic span {
	color: #666;
	font-family: "微软雅黑";
	font-size: 12px;
	font-weight: bold;
	margin-left: 20px;
}

#search input {
	color: #666;
	font-family: "微软雅黑";
	font-size: 12px;
	font-weight: bold;
}


/*文章内容区css样式*/

#main {
	width: 760px;
	min-height: 900px;
	/*最小900px高度*/
	height: auto;
	/*正文内容区高度不设上限*/
	margin: 300px 200px 10px 350px;
	background-color: #F5F5F5;
	border: #bbb solid 1px;
	/*增加边框*/
}

#topic {
	width: 738px;
	height: 20px;
	/*文章内容区的标题css样式*/
	border: #ccc dashed 1px;
	padding: 5px 0px 5px 20px;
}

span.articletopic {
	height: 20px;
	line-height: 20px;
	color: #666;
	font-family: "Courier New", Courier, monospace;
	font-size: 12px;
	font-weight: bold;
}

span.articleedit {
	float: right;
	margin-right: 20px;
	height: 20px;
	line-height: 20px;
	color: #666;
	font-family: "Courier New", Courier, monospace;
	font-size: 12px;
	font-weight: bold;
}

#article {
	width: 100%
	/*文章内容区的文章名称css样式*/
	text-align:left;
	height: 60px;
	border-bottom: #CCC dashed 1px;
	text-align: left;
}

#article table {
	margin-top: 10px;
	margin-left: 10px;
}

#articletopic {
	width: 65%;
	color: #609;
	font-weight: 100;
	font-size: 16px;
	margin-left: 10px;
	margin-top: 30px;
}

#articlereview {
	width: 15%;
	text-align: right;
	padding-left: 10px;
	color: #333;
	font-size: 14px;
}

#articlecreate {
	width: 20%;
	text-align: left;
	padding-left: 10px;
	color: #666;
	font-size: 12px;
	font-family: "Courier New", Courier, monospace;
}

#content {
	/*文章内容，含图片和文字区的样式*/
	width: 100%;
	min-height: 200px;
	height: auto;
	text-align: center;
	font-family: "Courier New", Courier, monospace;
	color: #606;
	font-size: 16px;
}

#content table {
	width: 90%;
	margin: 0px auto 100px auto;
	/*设置内容区中的字体*/
	font-family: Verdana, Geneva, sans-serif;
	font-size: 15px;
	color: #333;
	text-align: left;
}

#content td {
	padding-top: 10px;
	padding-bottom: 10px;
}


/*文章评论区样式*/

#review {
	width: 90%;
	min-height: 200px;
	height: auto;
	margin: 0px auto 20px auto;
	padding-bottom: 80px;
	border: #ccc solid 1px;
	background-color: #FFF;
}

#reviewtopic {
	width: 100%;
	height: 20px;
	line-height: 20px;
	padding: 5px 0px 5px 0px;
	text-align: center;
	background-color: #CCC;
}

#reviewtopic span {
	font-size: 12px;
	font-family: "Courier New", Courier, monospace;
	font-weight: bold;
	color: #666;
}

#review table {
	margin: 5px 0px 10px 0px;
	border-bottom: #CCC dashed 1px;
}

#review table tr {
	line-height: 30px;
}

#reviewusername {
	font-size: 16px;
	color: #609;
	font-weight: bold;
	text-align: left;
	padding-left: 20px;
}

#reviewcontent {
	font-size: 16px;
	color: #666;
	text-align: left;
	padding-left: 20px;
}

#reviewtime {
	width: 80p% font-family:"Courier New", Courier, monospacef;
	font-size: 12px;
	color: #666;
	text-align: left;
	padding-left: 20px;
}

#reviewdelete {
	width: 20%;
	text-align: right;
	padding-right: 20px;
	color: #666;
	font-family: "Courier New", Courier, monospace;
	font-size: 12px;
}


/*评论发表区的样式*/

#addreview {
	width: 90%;
	height: 230px;
	margin: 0px auto 30px auto;
	text-align: center;
	background-color: #FFF;
	border: #ccc solid 1px;
}

.addreviewtopic {
	background-color: #CCC;
	font-size: 12px;
	font-family: "Courier New", Courier, monospace;
	font-weight: bold;
	border-color: #999;
	color: #333;
	text-align: left;
	padding-top: 8px;
	padding-left: 20px;
}

.addreviewusername {
	background-color: #FFF;
	font-size: 12px;
	font-family: "Courier New", Courier, monospace;
	border-color: #999;
	color: #609;
	text-align: left;
	padding-top: 8px;
	padding-left: 20px;
}

#addreview input {
	color: #666;
	第 19 页 共 20 页 第四课 博客文章内容页面的静态网页设计 font-family: "Courier New", Courier, monospace;
	font-size: 12px;
	font-weight: bold;
}

.userphoto {
	width: 45px;
	height: 45px;
	border: 1px #cccccc solid
}


/*网页中的博客文章目录的超链接样式*/

a:link,
a:visited {
	color: #09F;
	text-decoration: none;
}

a:hover {
	color: #F00;
	text-decoration: none;
}

.clearfix:after {
	clear: both;
	content: ".";
	display: block;
	visibility: hidden;
	height: 0;
}

.clearfix {
	zoom: 1;
}

.copyright {
	text-align: center;
	margin-top: 5px;
	background: fff;
	padding: 10px 0px;
	color: #666;
}

.copyright a {
	text-decoration: underline;
	color: #06F;
	font-size: 12px;
}